<template>
  <div class="screenSingleA" id="screenA" :style="svgBG1">
    <div class="portlet-wrapper" v-for="item in portlets">
      <component :is='item.border' :config="gbc">
        <!-- <portletTitle v-if="!item.hideTitle" :title="item.title" ></portletTitle> -->
        <blockTitleA1 v-if="!item.hideTitle" :config="blockTitleConfig" >{{item.title}}</blockTitleA1>
        <component :is='item.component'></component>
        <i>{{item.component}}</i>
      </component>
    </div>
    <mapDrill class="screenSingle-map"></mapDrill>
  </div>
</template>
<script>

export default {
  mixins: [],
  name: "screenA",
  components: {
    mapDrill:() => import('./portlet/map/map-simple'),
    counter:() => import('./portlet/counter'),
    echartsPieA:() => import('./portlet/echarts-pieC'),
    personalCondition:() => import('./portlet/personalCondition'),
    pyramid:() => import('./portlet/pyramid'),
    echartsBarLineTabs:() => import('./portlet/echarts-barLineTabs'),
    echartsBarSpc:() => import('./portlet/echarts-barSpc'),
    echartsLineA:() => import('./portlet/echarts-lineA'),
  },
  data() {
    return {
      blockTitleConfig:{width:180,},
      colorBL:[$c.fade("bll9",1),$c.bll7,$c.bll3,$c.cyl5,$c.aql5,],
      showMap:false,
      portlets:[
        {title:"重点指标",component:"counter",border:"aYinTechBorderB1",hideTitle:true},
        {title:"非煤矿山情况",component:"echartsPieA",border:"aYinTechBorderB4"},
        {title:"井下人员情况",component:"personalCondition",border:"aYinTechBorderB4"},
        {title:"本月事故情况",component:"echartsLineA",border:"aYinTechBorderB4"},
        {title:"煤矿生产标准化",component:"pyramid",border:"aYinTechBorderB4"},
        {title:"联网接入情况",component:"echartsBarSpc",border:"aYinTechBorderB4"},
        {title:"执法情况",component:"echartsBarLineTabs",border:"aYinTechBorderB4",hideTitle:true},
      ]
    };
  },
  computed: {
    gbc(){
      let borderConfig={
        // backgroundColor:$c.bll9,
        // borderColor:$c.bll7,
        // decorationColor:[$c.bll3,$c.cyl5],
        opacity:.7,
      }
      return borderConfig;
    }
  },
  methods: {
    
  },
  mounted() {
    // A("tis","loading",()=>{ this.state.loading=false },1000)
    A("tis","showMap",()=>{this.showMap=true},3000)
  },
  destroyed(){
  }
};
</script>
<style lang="less">
.screenSingleA {.poa; .fullbox; z-index: 1; padding:90px 30px; //pointer-events: none;
  display: grid; grid-template-columns: repeat(24,1fr); grid-template-rows:repeat(24,1fr); grid-gap: 30px;
  // grid-template-areas:
  // "a a a . . . . . . d d d"
  // "a a a . . . . . . d d d"
  // "a a a . . . . . . d d d"//3
  // "a a a . . . . . . d d d"
  // "b b b . . . . . . e e e"
  // "b b b . . . . . . e e e"//6
  // "b b b . . . . . . e e e"
  // "b b b . . . . . . e e e"
  // "c c c g g g g g g f f f"//9
  // "c c c g g g g g g f f f"
  // "c c c g g g g g g f f f"
  // "c c c g g g g g g f f f";//12
  .portlet-wrapper{.bdr(5px);  overflow: hidden; pointer-events: visible; position: relative; z-index: 10; //height: 300px;
    // &:nth-child(1){ grid-area: a;}
    // &:nth-child(2){ grid-area: b;}
    // &:nth-child(3){ grid-area: c;}
    // &:nth-child(4){ grid-area: d;}
    // &:nth-child(5){ grid-area: e;}
    // &:nth-child(6){ grid-area: f;}
    // &:nth-child(7){ grid-area: g;}
    // grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
    //左侧
    &:nth-child(1){ grid-area: 1 / 1 / 9 / 7;}
    &:nth-child(2){ grid-area: 9 / 1 / 17 / 7;}
    &:nth-child(3){ grid-area: 17 / 1 / 25 / 7;}
    // //右侧
    &:nth-child(4){ grid-area: 1 / 19 / 9 / 25;}
    &:nth-child(5){ grid-area: 9 / 19 / 17 / 25;}
    &:nth-child(6){ grid-area: 17 / 19 / 25 / 25;}
    // //底部
    &:nth-child(7){ grid-area: 17 / 7 / 25 / 19;}
    .border-content{
      >i{.poa; bottom:10px; right:20px; font-size: 14px; opacity: .1; .fc(@wh); z-index: 10;}
    }
  }
  
}
</style>
